require(['./config'], () => {
    require(['template', 'request', 'header', 'jquery', 'footer', 'zoom'], (template, req, head) => {
        class Detail {
            constructor() {
                this.getData()
            }
            getData() {
                // 第一步 通过地址栏拿到商品 id  ?id=21312
                const id = window.location.search.slice(4)
                    // console.log(id)
                    // 第二步 发送请求获取数据
                req.getDetails(id)
                    .then(res => {
                        console.log(res)
                        this.renderDetailPage(res)

                    })
            }
            renderDetailPage(res) {
                    if (res.code === 200) {
                        const {
                            title,
                            originPrice,
                            price,
                            accessoryHints,
                            itemId,
                            saleNum,
                            couponStatus,
                            photo,
                            descContentList,
                            id
                        } = res.data.detail

                        // 使用 template 渲染页面
                        $("#design").html(template('detailData', {
                            title,
                            originPrice,
                            price,
                            accessoryHints,
                            itemId,
                            saleNum,
                            couponStatus,
                            photo,
                            descContentList,
                            id
                        }))

                        $(".zoom-image").elevateZoom({
                            gallery: 'gal1'
                        })
                        this.addToCart(id, photo[0].url, title, originPrice, price)

                    }
                }
                // 绑定事件 加入购物车
            addToCart(id, imgUrl, title, originPrice, price) {
                // $("#design").click(function(){ })
                $("#design").on('click', '.add_btn', () => {
                    // 1、获取商品信息   =>  图片  标题  价格  数量  单价
                    //    首先判断  localstorage 里面有没有 Info 这一个信息 
                    // 如果有 那我就让 info = localStorage.getItem("info") 
                    //在这一个 info 里面去循环遍历每条数据  查看有没有当前的这个商品信息 
                    // 如果有  就让这一条商品信息数量 +1  如果没有  就让这一条商品信息数量 = 1 并且把它追加到数组里面
                    // 如果没有  那我就让 info = 一个新的数组   数组里面就放我当前的这一条数据 
                    let info = null
                    if (localStorage.getItem("info")) {
                        // 有这个信息
                        info = JSON.parse(localStorage.getItem("info"))
                            // 拿到这个 info  然后用我当前这个商品的 id 和 info 里面的每一条数据进行比较
                        let flag = false
                        info.forEach(function(item) {
                            if (id == item.id) {
                                // 有这个商品信息 就让数量 + 1
                                item.count++
                                    flag = true
                            }
                            // else {
                            //     // 没有这个商品信息
                            //     // 定义一个对象 然后追加到数组
                            //     const obj = { id, imgUrl, title, originPrice, price, count: 1 }
                            //     info.push(obj)
                            // }
                        })
                        if (flag) {
                            // 有这个商品信息
                        } else {
                            const obj = { id, imgUrl, title, originPrice, price, count: 1 }
                            info.push(obj)
                        }

                    } else {
                        // 没有这条信息
                        info = [{ id, imgUrl, title, originPrice, price, count: 1 }]

                    }
                    // 把这条数据保存在 localstorage 里面
                    localStorage.setItem('info', JSON.stringify(info))

                    // console.log(info)
                    // 2、更新购物车里面的数据
                    // head.getCounts()
                    console.log(localStorage)
                        // 显示加入购物车成功 
                    $(".warning").animate({ opacity: 1 }, 500, 'linear', () => {
                        setTimeout(() => {
                            $(".warning").animate({ opacity: 0 }, 500, 'linear')
                        }, 500)
                    })
                })
            }

        }
        return new Detail()
    })
})